<template>
  <div v-loading.fullscreen.lock="fullscreenLoading">
    <section class="part">
      <span class="tit">全部文件</span>
      <el-table :data="tableData" border>
        <el-table-column
          v-for="(item, index) in tableCols"
          :key="index"
          :prop="item.prop"
          :label="item.label"
        ></el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-button @click="preview(scope.row)" class="preview" type="text" size="small" v-if="scope.row.type == 1">预览</el-button>
            <el-button @click="download(scope.row)" class="preview" type="text" size="small" v-else>下载</el-button>
            <!-- <el-button type="text" @click="del(scope.row)" class="del" size="small">删除</el-button> -->
            <el-button type="text" @click="modify(scope.row)" class="del" size="small">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
    </section>
     <input type="file" class="img_input" ref="portrait" @change="selectFile" />
  </div>
</template>
<script>
import axios from 'axios';
export default {
  name: "licenseFile",
  data() {
    return {
      fullscreenLoading: false,
      tableCols: [
        { label: "文件名称", prop: "name" },
        { label: "上传用户", prop: "uploadUser" },
        { label: "上传日期", prop: "createTime" }
      ],
      tableData: [],
      file: '',
      tempId: ''
    };
  },
  created() {
    this.getdata();
  },
  methods: {
    modify (item) {
      this.tempId = item.id;
      let file = this.$refs.portrait;
      file.value = ''; 
      this.$refs.portrait.click();
    },
    selectFile: function (e) {
      this.file = e.target.files[0]; 
      let fm = new window.FormData(); 
      fm.append('file', this.file);
      this.fullscreenLoading = true;
      axios.post(this.$imgUrl, fm, {headers: {'Content-Type': 'multipart/form-data'}})
        .then(({data}) => {
          if (data.code == 200) {
            // this.fileList[this.tempIndex].file = data.data.filePath;
            // this.fileList[this.tempIndex].fileName= data.data.fileName;
            // this.fileList[this.tempIndex].type = data.data.state;
            this.modFile(this.tempId, data.data.state,data.data.filePath);
          }
          // this.fullscreenLoading = false;
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    modFile(id, type, url) {
      this.axios.post('AdminAPI/licenseFile/updateFile',{id, type, url})
        .then(({data})=> {
          this.fullscreenLoading = false;
           this.$message({message: '修改成功',type: 'success'});
          this.getdata();
        })
    },
    download (row) {
        let url = this.$viewImg+row.url;
        var aLink = document.createElement("a");
        aLink.style.display = "none";
        aLink.href = url;
        aLink.setAttribute("download", decodeURI(name));
        document.body.appendChild(aLink);
        aLink.click();
        document.body.removeChild(aLink); //下载完成移除元素
        // window.URL.revokeObjectURL(url); //释放掉blob对象
    },
    getdata() {
      this.axios
        .get("AdminAPI/client/getFilesByClientId", {
          params: { clientId: sessionStorage.getItem("customerId") }
        })
        .then(({ data }) => {
          this.tableData = data.data;
          this.tableData.forEach(item => {
            item.createTime = this.$moment(item.createTime).format('YYYY-MM-DD')
          })
        });
    },
    preview(row) {
      if (!row.url) {
        this.$message({ message: "图片路径有误", type: "warning" });
        return false;
      }
      this.$bus.$emit("alertImg", { voucherImg: row.url });
    },
    del(row) {
        this.axios.post('AdminAPI/client/deleteFileById',{id: row.id})
            .then(({data})=> {
                if(data.code== 200) {
                  this.$message({message: '删除成功',type: 'success'});
                  this.getdata();
                }
            })
    }
  }
};
</script>
<style lang="scss" scoped>
.del {
  color: #409eff;
}
.preview {
  color: #e64545;
}
.img_input {
    position: absolute;
    left: -2000px;
    top: -100px;
  }
</style>
